@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

.post-item {
	@include card;
	padding: $spacing-lg;
	display: flex;
	gap: $spacing-base;
	margin-bottom: $spacing-base;
	@include fade-in;

	&:active {
		background: $bg-hover;
		box-shadow: $shadow-base;
	}

	// 左侧内容区域
	.post-content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: $spacing-sm;

		// 帖子标题
		.post-title {
			font-size: $font-lg;
			font-weight: $font-semibold;
			color: $text-primary;
			line-height: $line-height-tight;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: $spacing-xs;

			// 置顶标签
			.top-tag {
				background: linear-gradient(135deg, #FF6B6B 0%, #FF4D4F 100%);
				color: white;
				font-size: $font-xs;
				padding: 4rpx 12rpx;
				border-radius: $radius-sm;
				box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
				font-weight: $font-semibold;
			}

			// 精华标签
			.essence-tag {
				background: linear-gradient(135deg, #9F7AEA 0%, #722ED1 100%);
				color: white;
				font-size: $font-xs;
				padding: 4rpx 12rpx;
				border-radius: $radius-sm;
				box-shadow: 0 2rpx 8rpx rgba(159, 122, 234, 0.3);
				font-weight: $font-semibold;
			}
		}

		// 用户信息容器
		.post-meta {
			display: flex;
			margin-top: $spacing-xs;

			// 头像
			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: $spacing-sm;
				object-fit: cover;
				border: 2rpx solid $border-light;
			}

			// 用户统计信息
			.user-stats {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: $spacing-xs;

				// 昵称
				.nickname {
					font-size: $font-sm;
					color: $primary-color;
					font-weight: $font-medium;
				}

				// 统计数据
				.post-stats {
					display: flex;
					gap: $spacing-lg;
					font-size: $font-sm;
					color: $text-tertiary;

					// 单个统计项
					.stat-item {
						display: flex;
						align-items: center;
						gap: $spacing-xs;
						transition: color $transition-fast;

						&:hover {
							color: $primary-color;
						}
					}

					.stat-item-time {
						position: relative;
						left: 280rpx;
						font-size: $font-xs;
					}
				}
			}
		}
	}

	// 右侧图片区域
	.post-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: $radius-md;
		overflow: hidden;
		flex-shrink: 0;
		background: $bg-page;
		box-shadow: $shadow-sm;

		// 帖子图片
		.post-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform $transition-base;

			&:active {
				transform: scale(1.05);
			}
		}
	}
}
